<template>
	<view class="flex align-center justify-center flex-direction">
		<view class="list flex align-center justify-between">
			<view class="list-left flex align-center">
				<image src="/static/e4.png"></image>
				<input placeholder="手机号"  v-model="mobile"/>
			</view>
			<view class="list-right"  @tap='sendRegisterCode'>获取验证码</view>
		</view>
		<view class="list flex align-center justify-between">
			<view class="list-left flex align-center">
				<image style="width: 28upx;" src="/static/e5.png"></image>
				<input placeholder="验证码" v-model="red_code"/>
			</view>
			<view></view>
		</view>
		<view class="btn" @tap="login">立即绑定</view>
	</view>
</template>

<script>
	var api = require('@/components/api.js');
	export default {
		data() {
			return {
				mobile:'',
				red_code:'',
				code:'',
				user:'',	
			}
		},
		methods: {
			sendRegisterCode(){
				if(!this.mobile){
					uni.showToast({
						icon:'none',
						title:'请输入手机号码'
					})
					return;
				}
				api.get({
					url: 'User/GetEditMobileCode',
					data: {
						mobile: this.mobile
					},
					success: data => {
						console.info(JSON.stringify(data))
						if (data.ErrCode == 0) {
							this.code = data.Response.code
							uni.showToast({
								icon:'none',
								title:'已发送'
							})
						}
					}
				});
			},
			login(){
				if(!this.mobile){
					uni.showToast({
						icon:'none',
						title:'请输入手机号码'
					})
					return;
				}
				if(!this.red_code){
					uni.showToast({
						icon:'none',
						title:'请输入验证码'
					})
					return;
				}
				if(this.red_code != this.code){
				uni.showToast({
					icon:'none',
					title:'验证码错误'
				})
				return;	
				}
				api.post({
					url: 'User/PostUserMobileEdit?user_id='+uni.getStorageSync('user').user_id,
					data: {
						mobile: this.mobile,
					},
					success: data => {
						console.info(JSON.stringify(data))
						if (data.ErrCode == 0) {
							uni.showToast({
								title:'绑定成功'
							})
							//强制页面重载，跳转到首页
							uni.navigateTo({
								url: '/pages/changePhoneNum/changePhoneNum'
							});
							
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.list-right{
		width: 150upx;
			height: 56upx;
			border-radius: 28px;
			border: solid 1upx #d7d7d7;
			text-align: center;
			line-height: 56upx;
			font-size: 24upx;
	}
	.list-left image{
		width: 20upx;
		height: 34upx;
		margin-right: 36upx;
	}
	.list-left{}
	.list {
		padding-left: 46upx;
		padding-right: 20upx;
		background-color: #fff;
		width: 100%;
		height: 96upx;
		border-bottom: 1upx solid #ddd;
	}
.btn{
		text-align: center;
		width: 560upx;
		line-height: 70upx;
			height: 70upx;
			background-color: $btn-bground;
			border-radius: 35upx;
			color: #fff;
			font-size: 28upx;
			margin-top: 60upx;
	}
</style>
